<template>
  <a-modal
    :visible="visible"
    :title="$t('all.autotext1237')"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="form"
      ref="formRef"
    >
      <a-form-model-item :label="$t('all.autotext1054')" prop="center">
        <a-select
          v-model="form.researchIds"
          mode="multiple"
          :maxTagCount="2"
          allowClear
        >
          <a-select-option v-for="item in centerList" :key="item.id" :value="item.id">
            {{ item.researchCenterNo }}-{{ item.orgName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { centerList, teamResearch } from '@/api/overview/member'
export default {
  props: ['researchIds'],
  data () {
    return {
      proId: '',
      id: '',
      visible: false,
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      centerList: [],
      form: {
        researchIds: []
      }
    }
  },
  watch: {
    researchIds (e) {
      this.form.researchIds = e
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  methods: {
    open (id) {
      this.visible = true
      this.id = id
      this.getCenterList()
    },
    handleCancel () {
      this.visible = false
    },
    getCenterList () {
      const params = {
        proId: this.proId,
        deleted: 0, // 后端让传的写死的字段
        pageSize: 1000,
        pageNumber: 1
      }
      centerList(params).then(res => {
        this.centerList = [
          ...res.content
        ]
      })
    },
    async handleOk () {
      this.loading = true
      await teamResearch({
        id: this.id,
        researchId: this.form.researchIds.join(',')
      })
      this.$emit('onSuccess')
      this.loading = false
      this.handleCancel()
    }
  }
}
</script>

<style lang="less" scoped></style>
